<template>
  <div class="row inner-content">
    <div class="large-11 column medium-12 small-24">
      <div class="news-card" v-for="(item, index) in newList" v-if="index == 0" :key="index">
        <div class="img">
          <a :href="'/news/11/14/' + item.id"><img :src="item.articlePageImageUrl" :alt="item.description"/></a>
        </div>  
        <div class="news-relative margin-t">
          <h3><a :href="'/news/11/14/' + item.id">{{item.title}}</a></h3>
          <p class="color-secondary" v-html="cleanHtml(item.description, 64, '...')"></p>
        </div>
      </div>
    </div>
    <div class="large-13 column medium-12 small-24">
      <a href="" class="media-object news-list" v-for="(item, index) in newList" v-if="index >=1 && index <=3":key="index">
        <div class="media-object-section shrink" v-if="item.articlePageImageUrl">
          <div class="img">
           <a :href="'/news/11/14/' + item.id"><img :src="item.articlePageImageUrl" :alt="item.description"/></a>
          </div>
        </div>
        <div class="media-object-section">
          <h3><a :href="'/news/11/14/' + item.id">{{item.title}}</a></h3>
          <p class="color-secondary" v-html="cleanHtml(item.description, 64, '...')"></p>
        </div>
      </a>
    </div>
  </div>
</template>
<script>
  import {
    fetchArticleList
  } from '../../api'
  import { cleanHtml } from '@/utils'
  export default {
    data () {
      return {
        newList: []
      }
    },
    methods: {
      cleanHtml,
      getArticleList () {
        var param = {
          "params": {
            "catalogId": 10
          }
        }
        fetchArticleList(param).then((res) => {
          console.log('res.data', res.data)
          this.newList = res.data.content
        })
      }
    },
    mounted () {
      this.getArticleList()
    }
  }
</script>
<style>
@import 'css/variable.css';
  .news-relative{
    & h3{
      margin-bottom: 10px;
    }
    & p{
      font-size: 13px;
      color: var(--color-secondary);
    }
  }  
  .news-list {
    border-bottom: 1px dashed #f3f3f3;
    & .img{
      max-width: 160px;
    }
    & h3{
      transition: all .3s;
      margin-bottom: 4px;
      & + p {
        color: var(--color-secondary);
        font-size: 13px;
      }
    }
    
    &:last-child{
      border: none;
    }
  }
  @media only screen and (max-width: 767px) {
  	.news-relative{
  	  margin-bottom: 1rem;
  	  border-bottom: 1px dashed #ddd;
  	  & p{
  	    font-size: 10px;
  	  }
  	}
  	.news-list h3 + p{
  	  font-size: 10px;
  	}
  }
</style>

